<template>
  <div class="app-container">
    <!--项目经历-->
    <el-row :gutter="20">
      <!--项目经历选项卡-->
      <el-col :span="24">
        <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1"><span style="font-weight: bolder;font-size: 20px; color: #2788f3;">项目经历</span></el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="24">
        <el-card
          style="
                margin-top: 10px;
                padding-bottom: 10px;
                width: 100%;"
          shadow="hover">
          <div>
            <!--项目经历向标题-->
            <div class="job-status__title">
              项目经历
              <span class="job-status__title__must">必填</span>
            </div>
            <!--项目经历标题-->

            <!--编辑按钮 -->
            <div  style="float: right">
              <el-button type="success" size="medium" @click="handleAddDialog"><i class="el-icon-plus"></i>&nbsp;&nbsp;新增项目经历</el-button>
            </div>
            <!--编辑按钮-->

            <!--项目经历列表展示-->
            <div style="clear: both;">
              <el-card
                style="
                    margin-top: 10px;
                    padding-bottom: 10px;
                    box-shadow: 1px 2px 5px #8c939d;
                    width: 100%;"
                shadow="hover">

                <template v-if="projectList.length != 0">
                  <el-descriptions v-for="(item,index) in projectList"  :key="item.id"  style="padding: 20px;color: red;"  :title="item.name" :column="2">
                    <template slot="extra">
                      <el-button type="warning" size="medium" @click="handleUpdateDialog(item.id)"  class="el-icon-edit">修改</el-button>

                      <el-button type="danger" size="medium" @click="handleDelete(item.id)" class="el-icon-delete-solid">删除</el-button>
                    </template>
                    <el-descriptions-item label="项目名称">{{item.name}}</el-descriptions-item>
                    <el-descriptions-item label="开始时间">{{item.beginTime|formatDateTime}}</el-descriptions-item>
                    <el-descriptions-item label="结束时间">{{item.endTime|formatDateTime}}</el-descriptions-item>
                    <el-descriptions-item label="项目简述">{{item.description}}</el-descriptions-item>
                  </el-descriptions>
                </template>
                <template v-else>
                  <el-result icon="info" title="新增信息提示" subTitle="当前您的简历还没有求职意向方面的说明哦！">
                    <template slot="extra">
                      <el-empty description="快新增增求职意向吧！"></el-empty>
                    </template>
                  </el-result>
                </template>

              </el-card>
            </div>
            <!--项目经历列表展示-->
          </div>
        </el-card>
      </el-col>
      <!--求职意向  -->
    </el-row>
    <!--新增项目经历对话框-->
    <el-dialog
      title="新增项目经历对话框"
      :visible.sync="dialogFormVisible"
      width="1200px"
      :before-close="handleAddFormClose">
      <el-form :model="formData" :rules="rule" ref="dataAddForm">
        <el-form-item label="项目开始时间" prop="beginTime" label-width="150px">
          <el-date-picker
            v-model="formData.beginTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="项目结束时间" prop="endTime" label-width="150px" >
          <el-date-picker
            v-model="formData.endTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="项目名称" prop="name" label-width="150px" >
          <el-input  v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="项目描述" prop="description" label-width="150px" >
          <el-input type="textarea" v-model="formData.description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleAddFormClose()">取 消</el-button>
        <el-button type="primary" @click="handleAdd('dataAddForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--新增项目经历对话框-->


    <!--修改项目经历对话框-->
    <el-dialog
      title="修改项目经历对话框"
      :visible.sync="dialogFormVisible4Edit"
      width="1200px"
      :before-close="handleEditFormClose">
      <el-form :model="formData" :rules="rule" ref="dataEditForm">
        <el-form-item label="项目开始时间" prop="beginTime" label-width="150px">
          <el-date-picker
            v-model="formData.beginTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="项目结束时间" prop="endTime" label-width="150px" >
          <el-date-picker
            v-model="formData.endTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="项目名称" prop="name" label-width="150px" >
          <el-input  v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="项目描述" prop="description" label-width="150px" >
          <el-input type="textarea" v-model="formData.description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleEditFormClose">取 消</el-button>
        <el-button type="primary" @click="handleEdit('dataEditForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改项目经历对话框-->

  </div>
</template>

<script>
    import {findAllProject,save,deleteProject,findById,update} from "@/api/project";
    import {formatDate} from '@/utils/date';
export default {
  name: "index",
  data() {
    return {
      formData:{},//表单数据
      dialogFormVisible:false,//新增求职意向可见性
      dialogFormVisible4Edit:false,//修改求职意向可见性
      projectList:[],//求职意向数组
      rule: {
        beginTime: [{required: true, message: '请输入项目开始时间', trigger: 'blur'}],
        endTime: [{required: true, message: '请输入项目结束时间', trigger: 'blur'}],
        name: [{required: true, message: '请输入项目名称', trigger: 'blur'}],
        description: [{required: true, message: '请输入项目描述', trigger: 'blur'}],
      },//表单的校验规则
    }
  },
  filters: {
    //格式化日期
    formatDateTime(time) {
      if (time == null || time === '') {
        return 'N/A';
      }
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  created() {
    this.findAll()
  },
  methods: {
    //获取学生项目经验集合
    findAll(){
      console.log("======系统正在获取学生项目经验集合========")
      findAllProject().then(res=>{this.projectList = res.data;})
      console.log("======系统获取学生项目经验集合成功！！========")
    },
    //弹出添加窗口的方法
    handleAddDialog() {
      this.resetForm()
      this.dialogFormVisible = true
    },
    //处理添加的方法
    handleAdd(formName) {
      console.info("【系统正在进行新增项目经验....】")
      this.$refs[formName].validate((valid) => {
        if (valid) {
         save(this.formData).then(res=>{
           this.$message({
             showClose: true,
             message: '恭喜你，操作成功',
             type: 'success',
             onClose: () => {
             }
           });
           this.dialogFormVisible = false
           this.findAll()
           this.resetForm()
           console.info("【系统新增项目经验成功！....】")
         });
        }
      });
      console.info("【======系统增加项目经验成功！！====】")
    },
    //关闭新增表单窗口的方法
    handleAddFormClose() {
      this.dialogFormVisible = false
      this.resetForm();
    },
    //处理删除的方法
    handleDelete(id) {
      this.$confirm(`此操作将【永久删除】该项目经验, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteProject(id).then(res=>{
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {
              this.findAll()
            }
          })
        })
      }).catch(() => {
        // 点击取消后调用
        // 空着，防止报错
      });
    },
    //弹出编辑窗口的方法
    handleUpdateDialog(id) {
      console.info("【====系统正在弹出的修改用户窗口====】")
      this.resetForm()
      this.dialogFormVisible4Edit = true
      findById(id).then(res=>{
        this.formData = res.data;
      })
      console.info(`====【系统正在弹出的修改项目经验窗口成功！！并成功获取了ID为：${id}的用户详情=====`)

    },
    //处理修改的方法
    handleEdit(formName) {
      //表单校验
      this.$refs[formName].validate((valid) => {
        console.info("【系统正在进行修改项目经验....】")
        if (valid) {
          update(this.formData).then(res=>{
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
              }
            });
          });
            //关闭修改窗口。
            this.dialogFormVisible4Edit = false;
            this.findAll()
            console.info("【系统成功修改角色....】")


        }
      });
    },
    //关闭修改表单窗口的方法
    handleEditFormClose(){
      this.dialogFormVisible4Edit = false
      this.resetForm();
    },
    //重置表单的方法
    resetForm() {
      this.formData = {}
      this.roleFormData = {}
    },
  }
}
</script>

<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}

/*求职状态标题*/
.job-status__title {
  float: left;
  margin-bottom: 29px;
  font-size: 24px;
  color: #333;
  letter-spacing: 1.21px;
}
/*求职状态标题*/

/*求职状态必填标识项*/
.job-status__title__must {
  background: #ef7c67;
  border-radius: 2px;
  display: inline-block;
  width: 34px;
  height: 16px;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  color: #fff;
  vertical-align: 4px;
}
/*求职状态必填标识项*/

/*个人信息包裹容器*/
.profile-pre-wrapper {
  clear: both;
  position: relative;
  color: #333;
  padding-top: 20px;
}
/*个人信息包裹容器*/
</style>
